<template>
  <div class="side">
    <div class="movie-info clearfix">
      <div class="poster">
        <img :src="plan.mImage" />
      </div>
      <div class="content">
        <p class="name text-ellipsis">{{ plan.mName }}</p>
        <div class="info-item">
          <span>类型 :</span>
          <span class="value" v-for="(mtype,index) in plan.mType" :key="mtype.id">{{ mtype.name }}</span>
        </div>
        <div class="info-item">
          <span>时长 :</span>
          <span class="value">{{ plan.mLength }}分钟</span>
        </div>
      </div>
    </div>
    <div class="show-info">
      <div class="info-item">
        <span>影厅 :</span>
        <span class="value text-ellipsis">{{ plan.hName }}</span>
      </div>
      <div class="info-item">
        <span>版本 :</span>
        <span class="value text-ellipsis">原版2D</span>
      </div>
      <div class="info-item">
        <span>场次 :</span>
        <span class="value text-ellipsis"
          >{{ getTime }} {{ plan.startDate | fmtTime() }}</span
        >
      </div>
      <div class="info-item">
        <span>票价 :</span>
        <span class="value text-ellipsis">￥{{ price }}/张</span>
      </div>
    </div>
    <div class="ticket-info">
      <div class="no-ticket" v-show="selectedList.length === 0">
        <p class="buy-limit">座位：一次最多选{{ maxSelectedNum }}个座位</p>
        <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
      </div>
      <div class="has-ticket" v-show="selectedList.length > 0">
        <div class="text">座位：</div>
        <div class="ticket-container">
          <div class="side-item">
            <span class="ticket" v-for="item in selectedList" :key="item.id"
              >{{ item.row }}排{{ item.col }}列</span
            >
          </div>
        </div>
      </div>
      <div class="total-price">
        <span>总价 :</span>
        <span class="price">{{ total }}</span>
      </div>
    </div>
    <div class="confirm-order">
      <div class="cellphone">
        <span>手机号 :</span>
        <span class="phone-num">151****4182</span>
      </div>
      <div
        class="confirm-btn"
        :class="{ disable: selectedList.length === 0 }"
        @click="buyTicket"
      >
        确认选座
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { lockTicket } from '@/api/ticket'
import { confirmOrder } from '@/api/order'
import dayjs from 'dayjs'
import { getWeekDate } from '@/utils/index.js'

export default {
  name: 'Side',

  data () {
    return {}
  },
  props: {
    selectedList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    price: {
      type: Number,
      default: 0
    },
    maxSelectedNum: {
      type: Number,
      default: 6
    },
    pId: {
      type: Number,
      default: 0
    }
  },

  mounted () {},
  computed: {
    ...mapState('ticket', ['plan']),
    getTime () {
      const day = dayjs(dayjs(this.plan.startDate).format('YYYY-MM-DD')).diff(
        dayjs(new Date()).format('YYYY-MM-DD'),
        'day'
      )
      if (day === 0) {
        return '今天'
      } else if (day === 1) {
        return '明天'
      } else if (day === 2) {
        return '后天'
      } else {
        return getWeekDate(day)
      }
    }
  },

  methods: {
    async buyTicket () {
      const seat = this.selectedList.map(obj => ({
        seatRow: obj.row,
        seatColumn: obj.col
      }))
      const result = await lockTicket(seat, this.pId)
      if (result.data === '锁定成功') {
        this.handlePay()
        const expireTime = dayjs(new Date()).add(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
        this.$store.commit('ticket/setTotalPrice', this.total)
        this.$bus.$emit('buy', true)
        this.$store.commit('order/setEnd', expireTime)
        this.$bus.$emit('lock', this.selectedList)
      }
    },
    async handlePay () {
      const seat = this.selectedList.map(obj => ({
        seatRow: obj.row,
        seatColumn: obj.col
      }))
      const result = await confirmOrder(this.plan.id, seat, this.total)
      if (result.data !== null) {
        this.$store.dispatch('order/SET_ORDER', result.data)
      }
    }
  },
  filters: {
    fmtTime (value, format = 'MM月DD HH:mm') {
      return dayjs(value).format(format)
    }
  }
}
</script>

<style scoped>
.side {
  width: 340px;
  background-color: #f9f9f9;
  padding: 20px;
  display: inline-block;
  margin-top: 110px;
}
.side .movie-info .poster {
  width: 115px;
  height: 158px;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 2px 7px 0 hsl(0deg 0% 53% / 50%);
  box-shadow: 0 2px 7px 0 hsl(0deg 0% 53% / 50%);
  float: left;
}
.side .movie-info .poster img {
  width: 100%;
  height: 100%;
}
.side .movie-info .content {
  margin-left: 140px;
}
.side .movie-info .content .name {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 14px;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side .info-item {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
.side .show-info {
  margin-top: 111px;
}
.side .info-item .value {
  color: #151515;
  margin-left: 2px;
}
.side .ticket-info {
  padding: 20px 0 10px;
  border-top: 1px dashed #e5e5e5;
  border-bottom: 1px dashed #e5e5e5;
}
.side .show-info .info-item .value {
  width: 85%;
}

.side .show-info .info-item > span {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}
.side .info-item .value {
  color: #151515;
  margin-left: 2px;
}
.side .show-info .info-item {
  margin-bottom: 9px;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side .ticket-info .buy-limit {
  font-size: 14px;
  color: #999;
  margin: 0;
}
.side .ticket-info .no-selected {
  font-size: 14px;
  color: #333;
  text-align: center;
  margin: 28px 0 39px;
}
.side .ticket-info .no-selected span {
  color: #f03d37;
}
.side .ticket-info .text {
  font-size: 14px;
  color: #999;
  float: left;
}
.side .has-ticket {
  height: 80px;
}
/* 设置选中座位的样式 */
.side .ticket-info .side-item-text {
  font-size: 14px;
  color: #333;
  float: left;
  margin-left: 10px;
}
.side .ticket-info .ticket {
  cursor: default;
  position: relative;
  font-size: 12px;
  color: #f03d37;
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 12px 10px 0;
  background: url()
    no-repeat;
}
.side .ticket-info .ticket-container {
  margin-left: 42px;
  margin-bottom: 20px;
  position: relative;
  top: -5px;
}
.side .ticket-info .total-price {
  font-size: 14px;
  color: #333;
}
.side .ticket-info .total-price .price {
  color: #f03d37;
  font-size: 24px;
}
.side .ticket-info .total-price .price:before {
  content: "\FFE5";
  font-size: 14px;
}
.side .confirm-order {
  padding: 20px 0;
  text-align: center;
}
.side .confirm-order .cellphone {
  color: #999;
  font-size: 14px;
}
.side .confirm-order .cellphone .phone-num {
  color: #151515;
}
.side .confirm-order .confirm-btn.disable {
  cursor: default;
  background-color: #dedede;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.side .confirm-order .confirm-btn {
  cursor: pointer;
  width: 260px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-radius: 21px;
  position: relative;
  left: 50%;
  margin: 38px 0 0 -130px;
  background-color: #f03d37;
  -webkit-box-shadow: 0 2px 10px -2px #f03d37;
  box-shadow: 0 2px 10px -2px #f03d37;
}
</style>
